<template>
  <div>
    <!--begin::Dashboard-->
    <div class="row">
      <div class="col-xxl-4">
        <MixedWidget1></MixedWidget1>
      </div>

      <div class="col-xxl-4">
        <ListWidget1></ListWidget1>
      </div>

      <div class="col-xl-4">
        <ListWidget11></ListWidget11>
      </div>
      <div class="col-xl-12">
        <el-card>

          <a :href="course.courseUrl" target="_blank" class="item" v-for="(course,index) in CourseList" :key="index">
            <img
              class="img"
              :src="course.picUrl"
            />
            <p class="title ellipsis2">
              {{course.name}}
            </p>
            <p class="difficulty">{{course.people}}人报名</p>
            <div class="bottom clearfix">
              <span class="price l red bold">{{course.discrble}}</span>
            </div>
          </a>
          
        </el-card>
      </div>
      <div class="col-xl-4">
        <ListWidget12></ListWidget12>
      </div>
      <div class="col-xl-4">
        <ListWidget13></ListWidget13>
      </div>
    </div>

    <div class="row">
      <div class="col-xxl-6 order-1 order-xxl-2">
        <ListWidget14></ListWidget14>
      </div>
      <div class="col-xxl-6 order-1 order-xxl-2">
        <ListWidget15></ListWidget15>
      </div>
    </div>
    <!--end::Dashboard-->
  </div>
</template>

<script>
import { SET_BREADCRUMB } from "@/core/services/store/breadcrumbs.module";
import MixedWidget1 from "@/view/content/widgets/mixed/Widget1.vue";
import ListWidget1 from "@/view/content/widgets/list/Widget1.vue";
import ListWidget11 from "@/view/content/widgets/list/Widget11.vue";
import ListWidget12 from "@/view/content/widgets/list/Widget12.vue";
import ListWidget13 from "@/view/content/widgets/list/Widget13.vue";
import ListWidget14 from "@/view/content/widgets/list/Widget14.vue";
import ListWidget15 from "@/view/content/widgets/list/Widget15.vue";

export default {
  name: "dashboard",
  components: {
    MixedWidget1,
    ListWidget1,
    ListWidget11,
    ListWidget12,
    ListWidget13,
    ListWidget14,
    ListWidget15,
  },
  mounted() {
    this.$store.dispatch(SET_BREADCRUMB, [{ title: "乐游实战平台" }]);
  },
  methods: {
    setActiveTab1(event) {
      this.tabIndex = this.setActiveTab(event);
    },
    setActiveTab2(event) {
      this.tabIndex2 = this.setActiveTab(event);
    },
    /**
     * Set current active on click
     * @param event
     */
    setActiveTab(event) {
      // get all tab links
      const tab = event.target.closest('[role="tablist"]');
      const links = tab.querySelectorAll(".nav-link");
      // remove active tab links
      for (let i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
      }

      // set current active tab
      event.target.classList.add("active");

      // set clicked tab index to bootstrap tab
      return parseInt(event.target.getAttribute("data-tab"));
    },
  },
  data(){
    return {
      pic:"../course1.png",
      CourseList:[
        {
          picUrl:"../course1.png",
          name:"Vue Element+Node.js开发企业通用管理后台系统",
          people:"2038",
          discrble:"初级课程",
          courseUrl:"#"
        },
        {
          picUrl:"../course1.png",
          name:"Vue Element+Node.js开发企业通用管理后台系统",
          people:"2038",
          discrble:"初级课程",
          courseUrl:""
        },{
          picUrl:"../course1.png",
          name:"Vue Element+Node.js开发企业通用管理后台系统",
          people:"2038",
          discrble:"初级课程",
          courseUrl:""
        },{
          picUrl:"../course1.png",
          name:"Vue Element+Node.js开发企业通用管理后台系统",
          people:"2038",
          discrble:"初级课程",
          courseUrl:""
        }
      ]
    }
  }
};
</script>
<style scoped>
.el-card {
  border-radius: 8px;
}
.item {
  position: relative;
  width: 23%;
  min-width: 270px;
  height: 272px;
  margin: 0px 12px 20px 12px;;
  background: #fff;
  box-shadow: 0 6px 10px 0 rgb(95 101 105 / 15%);
  border-radius: 8px;
  float: left;
  transition: all 0.2s;
}
.img {
  height: 152px;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 8px 8px 0 0;
  background-size: 100%;
}
.item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px 0 rgba(95, 101, 105, 0.15);
}
.title.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
title {
  color: #545c63;
  line-height: 20px;
  height: 40px;
  margin-bottom: 8px;
  padding: 0 8px;
}
p {
  word-break: break-all;
}
.difficulty,
.container-types.new-course .list .item .difficulty {
  display: block;
  color: #9199a1;
  font-size: 12px;
  margin-bottom: 8px;
  padding: 0 8px;
}
.bottom {
  font-size: 12px;
  color: #9199a1;
  line-height: 18px;
  padding: 0 8px;
  margin-bottom: 18px;
}
.clearfix {
  *zoom: 1;
}
.price {
  line-height: 20px;
  margin-right: 2px;
}
.red {
  color: #f01414;
}
.l {
  float: left;
}
.title.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.title {
  color: #545c63;
  line-height: 20px;
  height: 40px;
  margin-bottom: 8px;
  padding: 0 8px;
}
.bold {
  font-weight: 700 !important;
}
.l {
  float: left;
}

</style>
